<html>
<head>
	<link rel="stylesheet" href="/static/styles.css" type="text/css" media="screen" />
	<title></title>
</head>
<body>
	<img src="/static/elements.png" id="elements" alt=""/>
	<div id="toggle">
		Show building blocks
		<p><a href="#" onclick="toggle('off'); return false;" id="btn_off" class="here">Off</a> <a href="#" onclick="toggle('on'); return false;" id="btn_on">On</a></p>
	</div>
	
	<img src="/static/header.png" alt="tangozebra"/>
	
	<div class="clearfix" id="player_container">
		<div id="side_module">
			<h2>More angles</h2>
			<ul>
				<li><a href="#"><img src="http://i.ytimg.com/vi/SAIEamakLoY/hqdefault.jpg" alt=""/></a></li>
				<li><a href="#"><img src="http://i.ytimg.com/vi/KX2BQM0D01M/hqdefault.jpg" alt=""/></a></li>
				<li><a href="#"><img src="http://i.ytimg.com/vi/1JagF4t0tJk/hqdefault.jpg" alt=""/></a></li>
			</ul>
		</div>
		<div id="player"></div>
	</div>
	
	<div id="engagement" class="clearfix">
		<div id="adspace">
			<img src="/static/ad.jpg" alt=""/><br/><br/>
			<img src="/static/hangout.jpg" alt=""/>
		</div>
		<div id="social">
			<img src="/static/facebook-stream.png" alt=""/>
			<div id="badges">
				<ul>
					<li>Keep informed on:</li>
					<li><a href="#"><img src="/static/facebook.png" alt="Facebook" /></a></li>
					<li><a href="#"><img src="/static/twitter.png" alt="Twitter" /></a></li>
					<li><a href="#"><img src="/static/google-plus.png" alt="Google Plus" /></a></li>
				</ul>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
		var tag = document.createElement('script');
		tag.src = "http://www.youtube.com/player_api";
		var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

		var player;
   	   function onYouTubePlayerAPIReady() {
			player = new YT.Player('player', {
				height: '390',
				width: '640',
				videoId: 'FPF9OP7Jync',
				events: {
 			     'onReady': function(event) { }//event.target.playVideo() }
			    }
			});
		}
		
		function toggle(which) {
			var e = $('#elements');
			var btn = $('#btn_'+ which);
			
			$('#toggle').find('a').removeClass('here');			
			btn.addClass('here');
			
			if(which == 'on') {
				e.show();
				$('#player').css('visibility', 'hidden');
			} else {
				$('#player').css('visibility', 'visible');
				e.hide();
			} 
		}
	</script>
</body>
</html>